<template>
  <transition name="fade">
    <dl ref="menu" class="friend-opearMenu" v-if="modelValue" v-outClose="handleToShow">
      <dt @click="startSend(otherId)">发消息</dt>
      <dt @click="openDialog">删除好友</dt>
    </dl></transition
  ><template v-if="isMounted"
    ><confirm-dialog
      to=".chat-box"
      v-model="showDialog"
      width="35%"
      title="删除好友"
      :isLoading="isLoading"
      @confirm="deleteFriend(otherId)"
      ><p>确定删除该好友？</p></confirm-dialog
    ></template
  >
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import vOutClose from "@/directives/vueClickClose";
import { useMessagePinia } from "@/pinia/messages";
import { useUserPinia } from "@/pinia/user";
import { storeToRefs } from "pinia";
import { useFriendPinia } from "@/pinia/friend";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import confirmDialog from "@/components/confirmDialog.vue";

const props = withDefaults(
  defineProps<{
    modelValue?: boolean;
    otherId: string;
    operateInitials: string;
  }>(),
  {
    modelValue: false,
  }
);
const emits = defineEmits<{
  (e: "update:modelValue", show: boolean): void;
}>();

const router = useRouter();

const messageStore = useMessagePinia();
const { user } = storeToRefs(useUserPinia());
const friendStore = useFriendPinia();

/**
 * 改变该组件的显示状态
 */
const handleToShow: (show: boolean) => void = (show: boolean): void => {
  emits("update:modelValue", show);
};

// 开始给好友发送消息
const startSend = (userId: string) => {
  emits("update:modelValue", false);
  if (messageStore.chatList.has(userId))
    router.replace({ path: "/chatRecord", query: { userId } });
  else {
    const data = friendStore.friends.get(props.operateInitials)?.value.get(userId)!;
    data.isSendLoading = true;
    messageStore
      .readySendMessage({
        selfId: user.value.userId,
        otherId: userId,
      })
      .then((code: number) => {
        data.isSendLoading = false;
        if (code === 1) router.replace({ path: "/chatRecord", query: { userId } });
        else if (code === -2)
          ElMessage({
            type: "error",
            message: "操作失败，对方和自己不是好友关系",
            duration: 1500,
          });
        else
          ElMessage({
            type: "error",
            message: "跳转失败",
            duration: 1500,
          });
      })
      .catch(() => {
        data.isSendLoading = false;
        ElMessage({
          type: "error",
          message: "跳转失败",
          duration: 1500,
        });
      });
  }
};

/**
 * 是否挂载确认操作的对话框
 */
const isMounted = ref<boolean>(false);
/**
 * 是否显示确认操作的对话框
 */
const showDialog = ref<boolean>(false);
/**
 * 是否正在删除该好友
 */
const isLoading = ref<boolean>(false);

// 准备打开对话框
const openDialog = () => {
  emits("update:modelValue", false);
  showDialog.value = true;
};

// 删除好友
const deleteFriend = (otherId: string) => {
  emits("update:modelValue", false);
  isLoading.value = true;
  friendStore
    .deleteFriend({
      selfId: user.value.userId,
      otherIds: [otherId],
      callback: () => router.replace("/contact"),
    })
    .then((code) => {
      isLoading.value = false;
      showDialog.value = false;
      if (code === 1)
        ElMessage({
          type: "success",
          message: "删除成功",
          duration: 1500,
        });
      else
        ElMessage({
          type: "error",
          message: "删除失败",
          duration: 1500,
        });
    })
    .catch(() => {
      isLoading.value = false;
      showDialog.value = false;
      ElMessage({
        type: "error",
        message: "删除失败",
        duration: 1500,
      });
    });
};

onMounted(() => (isMounted.value = true));
</script>

<style lang="scss" scoped>
.fade {
  @include fade(0.15s, ease);
}

.friend-opearMenu {
  @include opearMenu(999, 14px);
}
</style>
